import { Component, OnInit } from '@angular/core';
import { NgModule }      from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { Router }            from '@angular/router';
import * as $ from 'jquery';
import {Room} from './room';
@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
   rooms=[]
   room: Room = {name:'新增房间',id:1,x:1,y:1,height:1,width:1}
   isdraw:boolean = false;
   isDrawing:boolean = false
   currentIndex='';
   roomName='';
  constructor( private router: Router) { 
      
  }

   isStartDraw(): void{
        this.isdraw = !this.isdraw;
    }
   moveTarget(id): void{
        console.log(id);
        this.currentIndex=id;
        this.roomName=this.rooms[id].name
   }
   saveInfo(): void{
       console.log(this.currentIndex+"dhang");
       
       this.rooms[this.currentIndex].name=this.roomName
       
   }
   goMachineRoom(i): void{
     this.router.navigate(['/machineroom', i])
   }
  ngOnInit() {
    
    var _this = this,isMove,infoX,infoY,editing,i,index;
    
    $(document).mousedown(function(e){
        console.log(e);
        if(e.target.id === "father" && _this.isdraw){
            _this.room.x=e.offsetX;
            _this.room.y=e.offsetY;
            _this.room.id=Math.round(Math.random()*100)
            console.log(222);
            _this.isDrawing=true;
        }else if(e.target.id.includes('room')){
            console.log("开始移动了");
             isMove = true;
             infoX= e.offsetX;
             infoY= e.offsetY;
              index =e.target.id.split('_')[1]
        }else if(e.target.className==='editing'){
            console.log("可以改变大小");
            editing=true;
            e.target.style.background="green"
            i= e.target.parentNode['id'].split('_')[1]
        }
        
    })
    $(document).mousemove(function(e){
        if(e.target.id==="father" && _this.isDrawing){
            _this.room.width=e.offsetX-_this.room.x;
            _this.room.height=e.offsetY- _this.room.y;  
        }else if(isMove ){
            // 移动room的位置
             
           _this.rooms[index].x= e.pageX- infoX-$('#fathers')[0].offsetLeft;
           _this.rooms[index].y= e.pageY- infoY-$('#fathers')[0].offsetTop;   
        }else if( editing){
            console.log("正在编辑大小");
            
           // e.pageX-$('#fathers')[0].offsetLeft
_this.rooms[i].width=e.pageX-$('#fathers')[0].offsetLeft-_this.rooms[i].x
_this.rooms[i].height=e.pageY-$('#fathers')[0].offsetTop-_this.rooms[i].y
            console.log(e.pageX);
            console.log(e.pageY);
            
           
        }
        
        
    })
   
    $(document).mouseup(function(e){
        if(e.target.id ==="father" && _this.isDrawing){
            let _room = new Room();
            _room.name=_this.room.name;
            _room.id =_this.room.id;
            _room.x = _this.room.x;
            _room.y = _this.room.y;
            _room.height = _this.room.height;
            _room.width =_this.room.width;
        _this.rooms.push(_room);
        _this.room.id = 0;
        _this.room.x = 0;
        _this.room.y = 0;
        _this.room.height = 0;
        _this.room.width = 0;
        _this.isdraw = false;
        _this.isDrawing=false;
        $(".checkbox").prop("checked",false);
        }else if( isMove ){
            isMove=false;
        }else if(editing ){
            editing=false;
            e.target.style.background="none"
        }
        
    })


  }
  }

